<template>
  <div>
    <!--<img style="width: 100%;height: 100%" src="../assets/bg-top.png">-->
    <img style="width: 100%;height: 100%" src="../assets/bg-top.png" />
    <div class="main">
      <my-icon name="xiaomi"></my-icon>
      <my-icon name="chuangwei"></my-icon>
      <my-icon name="kangjia"></my-icon>
      <my-icon name="haier"></my-icon>
      <my-icon name="haixin"></my-icon>
      <my-icon name="changhong"></my-icon>
      <my-icon name="huawei"></my-icon>
      <my-icon name="tcl"></my-icon>
      <my-icon name="tongyong" :showAll="true"></my-icon>
    </div>
    <img style="width: 100%;height: 100%" src="../assets/bg-ikon.png" />
    <img style="width: 100%;height: 100%" src="../assets/bg-text.png" />
    <!--<video autoplay loop muted class="my-mp4" src="../assets/ikun.mp4">-->
    <!--  &lt;!&ndash;<source  type="video/mp4" />&ndash;&gt;-->
    <!--</video>-->
    <video id="video" width="100%" height="230px" src="http://videos.10086b2c.com/video.mp4?e=1721737088&token=w2KRU2Imh0h8PZpaFpbLTgKU9catvCBMdLszpgT1:XYN-BalbBYB99exYJm3SHGp1WrY=" autobuffer onclick="play()"  poster="../assets/video-img.png">
      <source src="http://videos.10086b2c.com/video.mp4?e=1721737088&token=w2KRU2Imh0h8PZpaFpbLTgKU9catvCBMdLszpgT1:XYN-BalbBYB99exYJm3SHGp1WrY=" type="video/mp4">
    </video>
    <img style="width: 100%;height: 100%" src="../assets/bg-down.png" />
  </div>
</template>

<script setup>
import MyIcon from "@/components/my-icon.vue";

const play = ()=> {
  let video = document.getElementById("video");
  video.play();
}
</script>

<style lang="scss" scoped>
.main{
  background: url("../assets/bg-pink.png") no-repeat center center fixed;
}
.my-mp4{
  width: 100%;
  height: 230px;
}
</style>
